<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Web Uploader</title>
    <link  href="//cdn.staticfile.org/webuploader/0.1.5/webuploader.css" rel="stylesheet" media="screen">
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
    <script src="//cdn.staticfile.org/webuploader/0.1.5/webuploader.js" charset="utf-8"></script>

    <style media="screen">
        body {
            font-family: "微软雅黑", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
            margin: 50px;
        }
        #drop-area {
            color: gray;
            background: rgb(250,250,250);
            border: dashed 3px lightgray;
            width: 150px;
            height: 150px;
            padding: 20px;
            margin-bottom: 20px;
            line-height: 150px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="drop-area">拖拽图片到这里上传</div>
    <div id="uploader-demo">
        <div id="filePicker">点击选择图片</div>
        <div id="fileList" class="uploader-list"></div> <!--用来存放item-->
    </div>
    <script type="text/javascript">
        var uploader = WebUploader.create({
            auto: true,               // 自动上传
            dnd: '#drop-area',        // 拖拽到 #drop-area 进行上传，可选
            swf: '//cdn.staticfile.org/webuploader/0.1.5/Uploader.swf', // swf 文件路径
            server: '/form/demo/upload', // 文件接收服务端 URL
            pick: '#filePicker',      // 选择文件的按钮，内部根据当前运行时创建，可能是 input 元素，也可能是 flash.
            resize: false,            // 不压缩 image, 默认如果是 jpeg，文件上传前会压缩一把再上传！
            accept: { // 只允许上传图片
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            },
            // compress: { // 对上传的图片进行裁剪处理，大于这个分辨率的图片会被压缩到此分辨率
            //     width: 300,
            //     height: 300,
            //     allowMagnify: false,
            //     crop: false // 是否等比缩放，false 为等比缩放
            // }
        });
        // 上传成功
        // response 为服务器返回来的数据
        uploader.onUploadSuccess = function(file, response) {
            console.log(response);
        };
        // 上传成功，例如抛异常
        // response 为服务器返回来的数据
        uploader.onUploadError = function(file, response) {
            console.log(response);
        };
        // 上传进度 [0.0, 1.0]
        // fileQueued 时创建进度条，uploadProgress 更新进度条
        // 可以使用 file.id 来确定是哪个文件的上传进度
        uploader.onUploadProgress = function(file, percentage) {
            console.log(percentage);
            console.log('uploadProgress:' + file.id);
        };
        // 当有文件添加进来的时候
        // 如果是图片，还可以创建缩略图
        uploader.onFileQueued = function(file) {
            console.log('fileQueued:' + file.id);
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
            );
            var $img = $li.find('img');
            $('#fileList').append($li);
            // 创建缩略图
            // 如果为非图片文件，可以不用调用此方法。
            // src 是 base64 格式的图片
            uploader.makeThumb(file, function(error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }
                $img.attr('src', src);
            }, 100, 100); // 100 * 100 为缩略图多大小
        };
    </script>
</body>
</html>
